<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教学管理系统 - 管理员界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css"> <!-- Link to the external CSS file -->
</head>
<body>
    <!-- Left Sidebar -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h2>教学管理系统</h2>
            <p>管理员控制面板</p>
        </div>
        <ul class="sidebar-menu">
            <li class="active" data-tab="user-management"><i class="fas fa-users"></i> 用户管理</li>
            <li data-tab="student-management"><i class="fas fa-user-graduate"></i> 学生管理</li>
            <li data-tab="teacher-management"><i class="fas fa-chalkboard-teacher"></i> 教师管理</li>
            <li data-tab="department-management"><i class="fas fa-building"></i> 院系管理</li>
            <li data-tab="course-management"><i class="fas fa-book"></i> 课程管理</li>
            <li data-tab="course-offering-management"><i class="fas fa-calendar-alt"></i> 课程开设管理</li>
            <!-- Add Enrollment Management if needed -->
            <!-- <li data-tab="enrollment-management"><i class="fas fa-clipboard-list"></i> 选课记录管理</li> -->
        </ul>
    </div>

    <!-- Main Content Area -->
    <div class="content">

        <!-- User Management Panel -->
        <div id="user-management" class="tab-content active">
            <div class="panel">
                <div class="panel-header"><h2>用户管理</h2></div>
                <div class="search-bar">
                    <input type="text" placeholder="搜索用户名..." id="user-search-input">
                    <button type="button" id="user-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="user-table-body"></tbody>
                </table>
                <div id="add-user-box" class="collapse-box">
                    <form id="add-user-form" class="edit-form">
                        <h3>用户信息</h3>
                        <input type="hidden" name="UserID"> <!-- For storing ID during edit -->
                        <label for="user-username">用户名:</label>
                        <input type="text" id="user-username" name="Username" placeholder="输入登录用户名" required>
                        <label for="user-password">密码:</label>
                        <input type="password" id="user-password" name="Password" placeholder="输入密码 (新增时必填, 编辑时留空则不修改)">
                        <label for="user-role">角色:</label>
                        <select id="user-role" name="Role" required>
                            <option value="" disabled selected>-- 选择用户角色 --</option>
                            <option value="student">学生</option>
                            <option value="teacher">教师</option>
                            <option value="admin">管理员</option>
                        </select>
                        <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                        </div>
                    </form>
                </div>
                <button class="add-row-btn" data-form-box="add-user-box"><i class="fas fa-plus"></i> 添加新用户</button>
            </div>
        </div>

        <!-- Student Management Panel -->
        <div id="student-management" class="tab-content">
            <div class="panel">
                <div class="panel-header"><h2>学生管理</h2></div>
                 <div class="search-bar">
                    <input type="text" placeholder="搜索学生姓名..." id="student-search-input">
                    <button type="button" id="student-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>学生ID</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>院系</th>
                            <th>入学日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="student-table-body"></tbody>
                </table>
                <div id="add-student-box" class="collapse-box">
                    <form id="add-student-form" class="edit-form">
                        <h3>学生信息</h3>
                        <!-- IMPORTANT: Assumes backend handles User creation when adding student -->
                        <input type="hidden" name="StudentID"> <!-- For storing ID during edit -->
                        <label for="student-username">登录用户名 (仅新增时):</label>
                        <input type="text" id="student-username" name="Username" placeholder="为学生创建登录账号 (仅新增)">
                        <label for="student-password">初始密码 (仅新增时):</label>
                        <input type="password" id="student-password" name="Password" placeholder="设置初始密码 (仅新增)">

                        <label for="student-name">姓名:</label>
                        <input type="text" id="student-name" name="Name" placeholder="学生真实姓名" required>
                        <label for="student-gender">性别:</label>
                        <select id="student-gender" name="Gender">
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                        <label for="student-department">所属院系:</label>
                        <select id="student-department" name="DepartmentID" required>
                            <option value="" disabled selected>-- 选择院系 --</option>
                            <!-- Options populated by JS -->
                        </select>
                        <label for="student-enrollment-date">入学日期:</label>
                        <input type="date" id="student-enrollment-date" name="EnrollmentDate">
                        <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                        </div>
                    </form>
                </div>
                <button class="add-row-btn" data-form-box="add-student-box"><i class="fas fa-plus"></i> 添加新学生</button>
            </div>
        </div>

        <!-- Teacher Management Panel -->
        <div id="teacher-management" class="tab-content">
            <div class="panel">
                <div class="panel-header"><h2>教师管理</h2></div>
                 <div class="search-bar">
                    <input type="text" placeholder="搜索教师姓名..." id="teacher-search-input">
                    <button type="button" id="teacher-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>教师ID</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>院系</th>
                            <th>职称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="teacher-table-body"></tbody>
                </table>
                <div id="add-teacher-box" class="collapse-box">
                    <form id="add-teacher-form" class="edit-form">
                        <h3>教师信息</h3>
                         <!-- IMPORTANT: Assumes backend handles User creation when adding teacher -->
                        <input type="hidden" name="TeacherID"> <!-- For storing ID during edit -->
                        <label for="teacher-username">登录用户名 (仅新增时):</label>
                        <input type="text" id="teacher-username" name="Username" placeholder="为教师创建登录账号 (仅新增)">
                        <label for="teacher-password">初始密码 (仅新增时):</label>
                        <input type="password" id="teacher-password" name="Password" placeholder="设置初始密码 (仅新增)">

                        <label for="teacher-name">姓名:</label>
                        <input type="text" id="teacher-name" name="Name" placeholder="教师真实姓名" required>
                        <label for="teacher-gender">性别:</label>
                        <select id="teacher-gender" name="Gender">
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                        <label for="teacher-department">所属院系:</label>
                        <select id="teacher-department" name="DepartmentID" required>
                            <option value="" disabled selected>-- 选择院系 --</option>
                             <!-- Options populated by JS -->
                        </select>
                        <label for="teacher-title">职称:</label>
                         <input type="text" id="teacher-title" name="Title" placeholder="如：教授、副教授">
                        <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                        </div>
                    </form>
                </div>
                <button class="add-row-btn" data-form-box="add-teacher-box"><i class="fas fa-plus"></i> 添加新教师</button>
            </div>
        </div>

        <!-- Department Management Panel -->
        <div id="department-management" class="tab-content">
            <div class="panel">
                <div class="panel-header"><h2>院系管理</h2></div>
                 <div class="search-bar">
                    <input type="text" placeholder="搜索院系名称..." id="department-search-input">
                    <button type="button" id="department-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>院系ID</th>
                            <th>院系名称</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="department-table-body"></tbody>
                </table>
                 <div id="add-department-box" class="collapse-box">
                    <form id="add-department-form" class="edit-form">
                        <h3>院系信息</h3>
                         <input type="hidden" name="DepartmentID"> <!-- For storing ID during edit -->
                         <label for="department-name">院系名称:</label>
                         <input type="text" id="department-name" name="DepartmentName" placeholder="输入新的院系全称" required>
                         <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                         </div>
                    </form>
                 </div>
                <button class="add-row-btn" data-form-box="add-department-box"><i class="fas fa-plus"></i> 添加新院系</button>
            </div>
        </div>

        <!-- Course Management Panel -->
        <div id="course-management" class="tab-content">
             <div class="panel">
                <div class="panel-header"><h2>课程管理</h2></div>
                 <div class="search-bar">
                    <input type="text" placeholder="搜索课程名称..." id="course-search-input">
                    <button type="button" id="course-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>学分</th>
                            <th>所属院系</th>
                            <th>描述</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="course-table-body"></tbody>
                </table>
                 <div id="add-course-box" class="collapse-box">
                   <form id="add-course-form" class="edit-form">
                       <h3>课程信息</h3>
                        <input type="hidden" name="CourseID"> <!-- For storing ID during edit -->
                        <label for="course-name">课程名称:</label>
                        <input type="text" id="course-name" name="CourseName" placeholder="输入课程名称" required>
                        <label for="course-credit">学分:</label>
                        <input type="number" id="course-credit" name="Credit" min="0.5" max="10" step="0.5" placeholder="输入学分 (如: 3)" required>
                        <label for="course-department">所属院系:</label>
                        <select id="course-department" name="DepartmentID">
                            <option value="">公共课 (无特定院系)</option>
                             <!-- Options populated by JS -->
                        </select>
                        <label for="course-description">课程描述:</label>
                        <textarea id="course-description" name="Description" placeholder="输入课程详细描述"></textarea>
                        <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                        </div>
                   </form>
                 </div>
                <button class="add-row-btn" data-form-box="add-course-box"><i class="fas fa-plus"></i> 添加新课程</button>
            </div>
        </div>

        <!-- Course Offering Management Panel -->
        <div id="course-offering-management" class="tab-content">
            <div class="panel">
                <div class="panel-header"><h2>课程开设管理</h2></div>
                <div class="search-bar">
                    <input type="text" placeholder="按学年搜索 (YYYY)..." id="offering-search-input">
                    <button type="button" id="offering-search-btn"><i class="fas fa-search"></i> 搜索</button>
                </div>
                <table class="data-table">
                   <thead>
                       <tr>
                           <th>开课ID</th>
                           <th>课程</th>
                           <th>教师</th>
                           <th>学年</th>
                           <th>学期</th>
                           <th>容量</th>
                           <th>操作</th>
                       </tr>
                   </thead>
                   <tbody id="offering-table-body"></tbody>
                </table>
                <div id="add-offering-box" class="collapse-box">
                   <form id="add-offering-form" class="edit-form">
                       <h3>开设课程信息</h3>
                        <input type="hidden" name="OfferingID"> <!-- For storing ID during edit -->
                        <label for="offering-course">选择课程:</label>
                        <select id="offering-course" name="CourseID" required>
                            <option value="" disabled selected>-- 选择课程 --</option>
                            <!-- Options populated by JS -->
                        </select>
                        <label for="offering-teacher">授课教师:</label>
                        <select id="offering-teacher" name="TeacherID" required>
                            <option value="" disabled selected>-- 选择教师 --</option>
                            <!-- Options populated by JS -->
                        </select>
                        <label for="offering-year">开课学年:</label>
                        <input type="number" id="offering-year" name="Year" placeholder="YYYY" required min="2000" max="2099">
                        <label for="offering-semester">开课学期:</label>
                        <select id="offering-semester" name="Semester" required>
                            <option value="spring">春季</option>
                            <option value="autumn">秋季</option>
                        </select>
                        <label for="offering-capacity">课程容量:</label>
                        <input type="number" id="offering-capacity" name="Capacity" min="1" value="100" placeholder="输入可选课人数上限" required>
                        <div class="action-buttons">
                            <button type="submit" class="button button-success"><i class="fas fa-save"></i> 保存</button>
                            <button type="button" class="button button-danger cancel-btn"><i class="fas fa-times"></i> 取消</button>
                        </div>
                   </form>
                </div>
                <button class="add-row-btn" data-form-box="add-offering-box"><i class="fas fa-plus"></i> 添加新开课记录</button>
            </div>
        </div>

        <!-- Add Enrollment Management Panel if needed -->

    </div> <!-- .content end -->

    <!-- Message Area (Optional but Recommended) -->
    <div id="message-area" class="message-area"></div>

    <script src="script.js"></script> <!-- Link to the external JS file -->
</body>
</html>